<script setup>
import { Delete } from '@element-plus/icons-vue'
import { ref, reactive, nextTick } from 'vue'
import { Avatar, CirclePlus } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import LayoutRightContainer from '@/views/layout-right-container.vue'
import {
    fetchRoleBasic, fetchRoleMenus, fetchRoleInfo,
    fetchRoleCreate, fetchRoleRemove
} from '@/api/role.services'
const breadcrumb = ref([
    { label: '系统管理' },
    { label: '用户管理' },
    { label: '角色管理' }
])
const role_id = ref(0)
const addForm = ref({})
const ruleFormRef = ref(null)
//使用reactive定于数据
const rules = reactive({
    //定义验证规则，有两种方式：
    //1.使用ele原生的验证规则。
    name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
})
const onSubmit = async () => {
    try {
        const valid = await ruleFormRef.value.validate()
        if (!valid) return
        const result = await fetchRoleCreate(addForm.value)
        if (result.code == 1) {
            ElMessage.success('更新成功')
            role_type.value = 1
            initRoleBasic()
        }
    } catch (error) {
        console.log(error)
    }
}
const defaultProps = ref({
    label: 'name',
    children: 'children',
})
const role_type = ref(0)
const getRoleInfo = async (id) => {
    if (!id) return
    role_type.value = 1
    role_id.value = id
    addForm.value = {
        name: '新建角色',
        remark: '',
        menu: []
    }
    const result = await fetchRoleInfo({ role_id: id })
    if (result.code == 1) {
        addForm.value = result.data
    }
    initMenuTree()
}
const menuTree = ref([])
const initMenuTree = async () => {
    const result = await fetchRoleMenus()
    if (result.code == 1) {
        menuTree.value = result.data
    }
}

const roleList = ref([])
const initRoleBasic = async () => {
    const result = await fetchRoleBasic()
    if (result.code == 1) {
        roleList.value = result.data
    }
}
const getdestroy = async () => {
    if (!role_id.value) {
        ElMessage.error('请选择要删除的用户')
        return
    }
    try {
        await ElMessageBox.confirm('确定删除所选角色吗？')
        const result = await fetchRoleRemove({ id: role_id.value })
        if (result.code == 1) {
            ElMessage.success('删除成功')
            initRoleBasic()
            role_type.value = 1
        }

    } catch (error) {
        console.log(error)
    }
}

const handleMenuChange = (e, x) => {
    addForm.value.menu = x.checkedKeys
}

const addrole = () => {
    role_id.value = 0
    addForm.value = {
        name: '',
        remark: '',
        menu: []
    }
}
const roleTypeChange = (type) => {
    role_type.value = type
}
initRoleBasic()
initMenuTree()
getRoleInfo(1)
</script>
<template>
    <LayoutRightContainer :breadcrumb="breadcrumb">
        <div :class="$style['role-container']">
            <div :class="$style['left-container']">
                <div :class="$style['flex-between']">
                    <el-link :underline="false" :icon="CirclePlus" @click="addrole"></el-link>
                    <el-link :underline="false" :disabled="addForm.id == 1" :icon="Delete"
                        @click="getdestroy()"></el-link>
                </div>
                <div :class="[$style['role_type_item'], role_id === item.id ? $style['item_active'] : '']"
                    v-for="item in roleList" :key="item.id" @click="getRoleInfo(item.id)">
                    <el-icon>
                        <Avatar />
                    </el-icon>
                    <span>{{ item.name }}</span>
                </div>
            </div>
            <div :class="$style['right-container']">
                <span :class="$style['title-wrapper']">基本信息</span>
                <el-form :model="addForm" label-width="100px" ref="ruleFormRef" :rules="rules" label-position="top"
                    :class="$style['form-wrapper']">
                    <el-form-item label="角色名称:" prop="name">
                        <el-input v-model="addForm.name" :disabled="addForm.id == 1" />
                    </el-form-item>
                    <el-form-item label="角色描述:">
                        <el-input type="textarea" v-model="addForm.remark" :rows="4" />
                    </el-form-item>
                </el-form>
                <span :class="$style['title-wrapper']" v-if="addForm?.id !== 1">权限配置</span>
                <div :class="$style['setting-container']" v-if="addForm?.id !== 1">
                    <div :class="$style['setting-left-container']">
                        <div :class="[$style['role_type_item'], role_type == 1 ? $style['item_active'] : '']"
                            @click="roleTypeChange(1)">
                            <img src="@/assets/role/role_1.png" />
                            <span>系统管理权限</span>
                        </div>
                    </div>
                    <el-tree v-if="role_type == 1" :class="$style['tree_box']" :data="menuTree" show-checkbox
                        node-key="id" default-expand-all :default-checked-keys="addForm.menu"
                        :expand-on-click-node="false" check-strictly :props="defaultProps" @check="handleMenuChange" />
                </div>
                <div :class="$style['button-wrapper']">
                    <el-button type="primary" style="width:120px;" :disabled="addForm.id == 1"
                        @click="onSubmit">确认</el-button>
                </div>
            </div>
        </div>
    </LayoutRightContainer>
</template>
<style lang="scss" module>
.role-container {
    display: flex;
    flex-direction: row;
    background: #fff;
    border-radius: 8px;
    height: 100%;
}

.left-container {
    flex: 240px 0 0;
    overflow-y: auto;
    border-right: 1px solid rgba(50, 58, 78, 0.16);
    padding: 10px;
    @include scrollbar;
}

.flex-between {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 5px;

    & [class~='el-icon'] {
        font-size: 16px;
    }
}

.role_type_item {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    height: 40px;
    align-items: center;
    box-sizing: border-box;
    font-size: 14px;
    color: #606266;
    padding: 0 10px;
    margin-top: 2px;
    cursor: pointer;

    & [class~='el-icon'] {
        margin-right: 10px;
    }

    & img {
        margin-right: 10px;
    }
}

.role_type_item:hover {
    background-color: rgba(47, 125, 241, 0.12);
    border-radius: 6px;
}

.item_active {
    background-color: rgba(47, 125, 241, 0.12) !important;
    border-radius: 6px;
    color: rgb(47, 125, 241);
    font-weight: 600;
}

.right-container {
    flex: 1;
    height: 100%;
    padding-left: 40px;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
}

.setting-container {
    flex: 1;
    width: 70%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    border: 1px solid #ccc;
    overflow-y: hidden;
}

.setting-left-container {
    flex: 240px 0 0;
    border-right: 1px solid #ccc;
    padding: 8px;
}

.tree_box {
    flex: 1;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    padding: 5px;
    @include scrollbar;

    & [class~='el-tree-node__content'] {
        height: 30px;
        line-height: 30px;
    }

    & [class~='el-checkbox__inner'] {
        border: 2px solid rgba(142, 150, 171, 0.32);
        border-radius: 4px;
    }
}

.title-wrapper {
    color: rgb(53, 58, 66);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
}

.form-wrapper {
    & [class~='el-input'] {
        width: 50%;
    }

    & [class~='el-textarea'] {
        width: 50%;
    }
}

.button-wrapper {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
}
</style>
